<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容回顾</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="./css/review-content.css?v=1"/>
</head>
<body>
<div id="wrap">
    <h3 class="PageTitle">{{tpo_name}}</h3>

    <p class="titleEn"> {{scenario_name_en}}</p>
    <p class="titleCn">{{scenario_name_cn}}</p>
    <div class="titleImgDiv">
        <img class="" :src="review_image_url" alt="">
    </div>
    <!--新增音频播放-->
    <div class="audio_div">
        <audio id="audio" :src="audio_url" width="0" height="0" controlsList="nodownload"></audio>
        <div class="footer">
            <div class="play" data-type="play"></div>
            <div class="time">
                <!--<span class="current-time">00:00</span>-->
                <div class="circle">
                    <span class="loading"></span>
                    <span id="small" data="pause"></span>
                </div>
                <span class="duration-time">00:00</span>
            </div>
        </div>
    </div>
    <div v-html="article_en" class="articleEn"></div>
    <div v-html="article_cn" class="articleCn"></div>
    <ul class="questionUl">
        <li class="questionLi noChangeNum" :class="{right:item.result==1,fault:item.result==0}"
            v-for="item in questionListWithUserAnswers">
            <!--{{item.question_number}}-->
            <div @click="changeNumFun(item.result,item.question_number)"> {{item.question_number}}</div>
        </li>
    </ul>
    <!-- 题目UI -->
    <div class="QuestionDivs" v-for="item in questionListWithUserAnswers">
        <div :class="{none:item.question_number!==isQuestShow}">
            <p class="questionName"> {{item.question_number}}、{{item.question_content_en}}</p>
            <div v-my_option="item"></div>
            <h5 class="question_analys_title">题目解析</h5>
            <p class="question_analys_content">
                {{item.question_analysis}}
            </p>
        </div>
    </div>
    <div class="btnDiv" @click="category()">
        <span>完成本章</span>
    </div>
</div>
</body>
</html>
<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/basis.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" charset="utf-8"></script>
<script src="js/vue-router.js" charset="utf-8"></script>
<script src="js/jweixin-1.2.0.js" charset="utf-8"></script>
<script src="js/weixinShare.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var url = location.search;
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串；
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = ( strs[i].split("=")[1] );
        }
        console.log(theRequest); //此时的theRequest就是我们需要的参数；
    }
    ;
    //指令
    Vue.directive('my_option', {
        bind: function (el, binding, vnode) {
            var question = binding.value;
            var html = "";
            if (question.question_type == 4) {
                // 表格题型
                question.question_option[0].columns.unshift({"id": 0, "value": ""});
                question.question_option[0].rows.unshift({"id": 0, "value": ""});
                var columns = question.question_option[0].columns;
                var rows = question.question_option[0].rows;
                var q4 = "<table class='tables'>";
                for (var r = 0; r < rows.length; r++) {
                    var row = rows[r];
                    q4 += "<tr>"
                    for (var c = 0; c < columns.length; c++) {
                        q4 += "<td>"
                        if (r == 0 && c == 0) {
                            q4 += "&nbsp;"
                        } else if (r == 0 && c != 0) {
                            // 表头
                            q4 += "<span class='th_head'>" + columns[c].value + "</span>";
                        } else if (r != 0 && c == 0) {
                            // 列头
                            q4 += "<span class='tr_head'>" + rows[r].value + "</span>";
                        } else {
//                            if (question.user_answer !== null) {
                            var answer = question.question_answer[r - 1].result;
                            var u_answer = [];//与当前小题目对应的用户的答题结果(0错误,1)
                            var correct_ua = null;//与当前小题目对应的用户的答案
                            if (question.user_answer !== null) {
                                for (var i = 0; i < question.user_answer.length; i++) {
                                    var ua = question.user_answer[i];

                                    if (ua.id == row.id) {
                                        correct_ua = ua;
                                        break;
                                    }
                                    ;

                                }
                                if (correct_ua == null) {
                                    u_answer = [];
                                } else {
                                    u_answer = correct_ua.result;
                                }
                                u_answer = eval(u_answer);
                                var ar = answer.some(function (x) {
                                    return x == c;
                                });
                                var uar = u_answer.some(function (x) {
                                    return x == c;
                                });
//                                 判断答案
                                if (ar && uar) {
                                    // 回答正确
                                    q4 += "<span class='ok'>" + '✔' + "</span>";
                                } else if (!ar && uar) {
                                    //选错
                                    q4 += "<span class='error'>" + '✘' + "</span>";
                                } else if (ar && !uar) {
                                    //未选
                                    q4 += "<span class='noChange'>" + '✔' + "</span>";

                                } else {
                                    //无答案,也未选
                                    q4 += "<span >" + ' ' + "</span>";

                                }
                            } else {
                                //无答案,也未选
                                q4 += "<span >" + ' ' + "</span>";

                            }
//                            }

                        }

                        q4 += "</td>"
                    }
                    q4 += "</tr>"
                }
                q4 += "</table>";
                html += q4;
            } else if (question.question_type == 1) {
                // 单选题型
                var uAnswer, qAnswer;
                for (var i = 0; i < question.question_option.length; i++) {
                    var optionId = question.question_option[i].id;
                    var option = question.question_option[i];
                    if (question.user_answer !== null) {
                        for (var ua = 0; ua < question.user_answer.length; ua++) {
                            uAnswer = question.user_answer[ua];
                        }
                        for (var qa = 0; qa < question.question_answer.length; qa++) {
                            qAnswer = question.question_answer[qa];
                        }
                        if (uAnswer == optionId && qAnswer == optionId) {
                            //选对
                            html += '<p class="questionOption ok">' + option.label + ':&nbsp&nbsp' + option.content + '</p>';
                        } else if (uAnswer == optionId && qAnswer != optionId) {
                            // 选错
                            html += '<p class="questionOption error ">' + option.label + ':&nbsp&nbsp' + option.content + '</p>';
                        } else if (uAnswer != qAnswer && qAnswer == optionId) {
                            //正确未选
                            html += '<p class="questionOption ok">' + option.label + ':&nbsp&nbsp' + option.content + '</p>';
                        } else {
                            //不正确未选
                            html += '<p class="questionOption ">' + option.label + ':&nbsp&nbsp' + option.content + '</p>';
                        }

                    } else {
                        //不正确未选
                        html += '<p class="questionOption ">' + option.label + ':&nbsp&nbsp' + option.content + '</p>';
                    }
                }


            } else if (question.question_type == 2) {
                //多选题型
                for (var i = 0; i < question.question_option.length; i++) {
                    var optionId_m = question.question_option[i].id;
                    var option_m = question.question_option[i];
                    var qAnswer_m = question.question_answer.some(function (t) {
                        return optionId_m == t
                    });
                    if (question.user_answer !== null) {

                        var uAnswer_m = question.user_answer.some(function (t) {
                            return optionId_m == t
                        });
                        if (qAnswer_m && uAnswer_m) {
                            //选对
                            html += '<p class="questionOption ok">' + option_m.label + ':&nbsp&nbsp' + option_m.content + '</p>';
                        } else if (!qAnswer_m && uAnswer_m) {
                            //选错
                            html += '<p class="questionOption error">' + option_m.label + ':&nbsp&nbsp' + option_m.content + '</p>';
                        } else if (qAnswer_m && !uAnswer_m) {
                            //正确未选
                            html += '<p class="questionOption noChange">' + option_m.label + ':&nbsp&nbsp' + option_m.content + '</p>';

                        } else if (!qAnswer_m && !uAnswer_m) {
                            //错误未选
                            html += '<p class="questionOption">' + option_m.label + ':&nbsp&nbsp' + option_m.content + '</p>';
                        }
                    } else {
                        html += '<p class="questionOption">' + option_m.label + ':&nbsp&nbsp' + option_m.content + '</p>';
                    }
                }

            } else if (question.question_type == 3) {
                //排序题型
//                if (question.user_answer !== null) {
                var option_o, optionId_o, qAnswer_o, uAnswer_o;
                for (var i = 0; i < question.question_answer.length; i++) {
                    qAnswer_o = question.question_answer[i];
                    option_o = question.question_option[qAnswer_o - 1];
                    if (question.user_answer !== null) {
                        uAnswer_o = question.user_answer[i];
                        if (qAnswer_o == uAnswer_o) {
                            html += '<p class="questionOption ok">' + option_o.label + ':&nbsp&nbsp' + option_o.content + '</p>';
                        } else if (qAnswer_o != uAnswer_o) {
                            html += '<p class="questionOption error">' + option_o.label + ':&nbsp&nbsp' + option_o.content + '</p>';
                        }

                    } else {
                        html += '<p class="questionOption">' + option_o.label + ':&nbsp&nbsp' + option_o.content + '</p>';
                    }
                }
//                }


            }
            el.innerHTML = html;

        }
    })
    var vm = new Vue({
        el: '#wrap',
        data: {
            tpo_name: '',
            scenario_name_en: '',
            scenario_name_cn: '',
            cover_url: '',
            review_image_url: '',
            audio_url: '',
            article_en: '',
            article_cn: '',
            questionListWithUserAnswers: '',
            isQuestShow: 1,
            isRight: false,
            isFault: false,
            question_option: '',
            vocabularyList: '',
            sentenceList: '',
            data_a: ""

        },
        methods: {
            HttpDataFun: function () {
                this.$http.post(URL + '/tpo/exercise/categories/scenario/review/' + theRequest.id, {}).then(function (res) {
                        console.log(res.data);
                        this.tpo_name = res.data.data.tpo_name;
                        this.scenario_name_en = res.data.data.scenario_name_en;
                        this.scenario_name_cn = res.data.data.scenario_name_cn;
                        this.cover_url = res.data.data.cover_url;
                        this.review_image_url = res.data.data.review_image_url;
                        this.audio_url = res.data.data.audio_url;
                        this.article_en = res.data.data.article_en;
                        this.article_cn = res.data.data.article_cn;
                        this.vocabularyList = res.data.data.vocabularyList;
                        this.sentenceList = res.data.data.sentenceList;
                        //重要句型处理与标记
                        var sentenceListArr0 = [], sentenceListArr1 = [], sentenceListArr2 = []
                        for (var i = 0; i < this.sentenceList.length; i++) {
                            if (this.sentenceList[i] != "") {
                                sentenceListArr0.push(this.sentenceList[i].split('?'))
                            }

                        }
                        sentenceListArr0 = [].concat.apply([], sentenceListArr0);
                        for (var i = 0; i < sentenceListArr0.length; i++) {
                            if (this.sentenceList[i] != "") {
                                sentenceListArr1.push(sentenceListArr0[i].split(','))
                            }

                        }
                        sentenceListArr1 = [].concat.apply([], sentenceListArr1);
                        for (var i = 0; i < sentenceListArr1.length; i++) {
                            sentenceListArr2.push(sentenceListArr1[i].split('.'))
                        }
                        sentenceListArr2 = [].concat.apply([], sentenceListArr2);
                        console.log(sentenceListArr2);
                        for (var i = 0; i < sentenceListArr2.length; i++) {

                            if (sentenceListArr2[i] == ''||sentenceListArr2[i].length==1) {
//                                console.log(i+'===='+sentenceListArr2[i].length)
                            } else {
//                            console.log(i+'===='+ sentenceListArr2[i]);
//                            if (sentenceListArr2[i] !== ' '||sentenceListArr2[i] !== '') {
                                var sentence = sentenceListArr2[i].trim();
//                                console.log(sentence)
                                var reg_S = new RegExp(sentence)
//                                console.log(reg_S)
                                this.article_en = this.article_en.replace(reg_S, '<span class=sentenceListCSS>' + sentence + '</span>')

                            }

                        }
                        //重点词汇标记
                        for (var i = 0; i < this.vocabularyList.length; i++) {
                            var vocabulary = this.vocabularyList[i];
                            var reg_V = new RegExp(vocabulary)
                            this.article_en = this.article_en.replace(reg_V, '<span class=vocabularyCSS>' + vocabulary + '</span>')
                        }
                        // 题目,将相关字符串解析成对象
                        this.questionListWithUserAnswers = res.data.data.questionListWithUserAnswers;
                        for (var i = 0; i < this.questionListWithUserAnswers.length; i++) {
                            // 选项
                            this.questionListWithUserAnswers[i].question_option = eval(this.questionListWithUserAnswers[i].question_option);
                            // 答案
                            //   console.log('qan:'+this.questionListWithUserAnswers[i].question_answer);
                            // console.log('uan:'+this.questionListWithUserAnswers[i].user_answer);

                            this.questionListWithUserAnswers[i].question_answer = eval(this.questionListWithUserAnswers[i].question_answer);
                            // 用户答案
                            this.questionListWithUserAnswers[i].user_answer = eval(this.questionListWithUserAnswers[i].user_answer);
                        }

                        //  console.log(this.questionListWithUserAnswers[0].question_option);
                    }, function (res) {

                    }
                )

            },
            changeNumFun: function (val1, val2) {
                this.isQuestShow = val2;
                //  console.log(val1)
                if (val1 == 1) {
                    this.isRight = true;
                }
                if (val1 == 0) {
                    this.isfault = true;
                }
            },
            //完成本章
            category: function () {
                window.location.href = 'category.html?id=' + theRequest.id;
            }
        }
    })
    vm.HttpDataFun()
    //音频播放
    $(function () {
        var durationTime, currentTime, left;
        var width = $(".circle").width();
        var num = 0;
        $(".play").click(function () {
            var type = $(".play").attr("data-type");
            if (type == "play") {
                document.getElementById("audio").play();
                $(".play").attr("data-type", "pause");
            } else {
                document.getElementById("audio").pause();
                $(".play").attr("data-type", "play");
            }
            $(this).toggleClass("cur")
            getTotalTime();
        })

        var timer_T = setInterval(function () {
            getCurrentTime();

        }, 500);

        // 获取歌曲总时间
        function getTotalTime() {
            var timer = setInterval(function () {
                durationTime = document.getElementById("audio").duration;
                console.log(durationTime)
                $(".duration-time").html(setTime(durationTime));
                if (!isNaN(durationTime)) {

                    clearInterval(timer);
                }
            }, 500);
        }

        // 获取歌曲当前的播放时间
        function getCurrentTime() {
            currentTime = document.getElementById("audio").currentTime;
//            $(".current-time").html(setTime(currentTime));
            left = currentTime / durationTime * width;
            $(".circle #small").css("left", left);
            $(".circle .loading").css("width", left + "px");
            if (currentTime == durationTime) {
//                num++;
//                if (num > len - 1) {
//                    num = len - 1;
//                    return false;
//                }

//                if( $(".duration-time").text()!='00:00'){
//                    clearInterval(timer_T);
//                }
                document.getElementById("audio").pause();
                $(".play").attr("data-type", "pause");
                getTotalTime();
            }
        }

        // 时间格式化
        function setTime(x) {
            var m = Math.floor(x / 60);
            var s = x.toFixed(0) - m * 60;
            m = m < 10 ? "0" + m : m;
            s = s < 10 ? "0" + s : s;
            return m + ":" + s;
        }

        // 拖拽事件
        var touch = document.getElementById("small");
        touch.addEventListener("touchstart", handleStart, false);
        touch.addEventListener("touchmove", handleMove, false);
        touch.addEventListener("touchend", handleEnd, false);
        var x1, y1, oldTime, newTime, olfLeft, newLeft;

        function handleStart(e) {
            e.preventDefault();
            var touches = e.changedTouches;
            x1 = touches[0].pageX;
            y1 = touches[0].pageY;
            olfLeft = $("#small").position().left;
            document.getElementById("audio").pause();
        }

        function handleMove(e) {
            e.preventDefault();
            var x2 = e.changedTouches[0].pageX;
            var y2 = e.changedTouches[0].pageY;
            newLeft = x2 - x1;
            nowLeft = olfLeft + newLeft;
            if (nowLeft < 0) {
                nowLeft = 0;
            }
            if (nowLeft > width) {
                nowLeft = width;
            }
            $(".circle .loading").css("width", nowLeft + "px");
            $("#small").css("left", nowLeft + "px");
            var per = nowLeft / width;
            var nowAudioTime = durationTime * per;
            document.getElementById("audio").currentTime = nowAudioTime;
            console.log(document.getElementById("audio").currentTime);
        }

        function handleEnd(e) {
            touch.removeEventListener("touchmove", handleEnd, false);
            document.getElementById("audio").play();
        }
    })
</script>